import React, { useState, Component } from 'react';
import { useParams, useLocation, useNavigate, BrowserRouter, Routes, Route, } from "react-router-dom"
import { Breadcrumb, Layout, Menu } from 'antd';

import {

  TeamOutlined,
  UserOutlined,
} from '@ant-design/icons';
import oc from '../css/oc.module.css'

import routers from '../router/index'

function withRouter(Component) {
  return (props) => (
    <Component
      {...props}
      params={useParams()}
      location={useLocation()}
      navigate={useNavigate()}
    />
  );
}

const { Header, Content, Footer, Sider } = Layout;

function getItem(label, key, icon, children) {
  return {
    key,
    icon,
    children,
    label,
  };
}

class Onec extends Component {
  constructor() {
    super()
    this.items = [
      getItem('起始页', 'sub1', <UserOutlined />, [
        getItem('后台首页', '/home'),
      ]),
      getItem('舆情报告', 'sub2', <TeamOutlined />, [getItem('全部舆情', '/allyu1'), getItem('正面舆情', '/allyu2'), getItem('负面舆情', '/allyu3')]),
      getItem('舆情设置', 'sub3', <TeamOutlined />, [getItem('舆情关键词设置', '/setyu1'), getItem('舆情报警设置', 'setyu2')]),

    ]
    this.state = {
      collapsed: false
    }

  }
  setCollapsed = (collapsed) => {
    this.setState({
      collapsed: collapsed
    })
    console.log('-----', collapsed);
  }
  menuFn = (e) => {
    // console.log('---+++', e.key);
    this.props.navigate(e.key)
  }
  render() {

    return (
      <div className='box'>
        <Layout
          style={{
            minHeight: '100vh',
          }}
        >

          <Sider collapsible collapsed={this.state.collapsed} onCollapse={(value) => this.setCollapsed(value)}>
            <div className={oc.logo} />
            <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline" items={this.items} onSelect={(e) => this.menuFn(e)} />
          </Sider>
          <Layout className={oc.site_layout}>
            <Header
              className={oc.site_layout_background}
              style={{
                padding: 0,
              }}
            />
            <Content
              style={{
                margin: '0 16px',
              }}
            >
              <Breadcrumb
                style={{
                  margin: '16px 0',
                }}
              >
                <Breadcrumb.Item>User</Breadcrumb.Item>
                <Breadcrumb.Item>Bill</Breadcrumb.Item>
              </Breadcrumb>
              <div
                className={oc.site_layout_background}
                style={{
                  padding: 24,
                  minHeight: 360,
                }}
              >
                <Routes>
                  {
                    routers.map((e, i) => {
                      if (!e.children) {
                        return false
                      } else {
                        return e.children.map((ee, ii) => {
                          return <Route path={ee.path} element={ee.element} key={i}></Route>
                        })
                      }
                    })
                  }
                </Routes>
              </div>
            </Content>
            <Footer
              style={{
                textAlign: 'center',
              }}
            >
              Ant Design ©2018 Created by Ant UED
            </Footer>

          </Layout>

        </Layout>
      </div>
    )
  }
}
export default withRouter(Onec)
